import React from "react";
import { Card, Row, Col, Button, Icon, Tabs } from "antd";
import "./index.less";

interface TabPane {
	icon?: string;
	key: string;
	tabTitle: any;
	content: string;
}

const TabsPane = Tabs.TabPane;
const tabArray: Array<TabPane> = [
	{
		icon: "icon-plus",
		key: "1",
		tabTitle: "add",
		content: "react"
	},
	{
		icon: "icon-edit",
		key: "2",
		tabTitle: "icon-edit",
		content: "vue"
	},
	{
		icon: "icon-delete",
		key: "3",
		tabTitle: "delete",
		content: "anglar"
	},
	{
		icon: "icon-search",
		key: "4",
		tabTitle: "search",
		content: "jquery"
	}
];

const tabArrayB: Array<TabPane> = [
	{
		key: "1",
		tabTitle: getTabTitleB("plus", "add"),
		content: "react"
	},
	{
		key: "2",
		tabTitle: getTabTitleB("edit", "edit"),
		content: "vue"
	},
	{
		key: "3",
		tabTitle: getTabTitleB("delete", "delete"),
		content: "anglar"
	},
	{
		key: "4",
		tabTitle: getTabTitleB("search", "search"),
		content: "jquery"
	}
];

function getTabTitleB(icon: string, tabTitle: string) {
	return (
		<span>
			<Icon type={icon} />
			{tabTitle}
		</span>
	);
}

interface IProp {}

interface IState {
	activeKey: string;
	panes: Array<TabPane>;
}
class UITab extends React.Component<IProp, IState> {
	constructor(props: IProp, state: IState) {
		super(props, state);
		let panes: Array<TabPane> = [
			{
				key: "1",
				tabTitle: "add",
				content: "react"
			},
			{
				key: "2",
				tabTitle: "edit",
				content: "vue"
			},
			{
				key: "3",
				tabTitle: "delete",
				content: "anglar"
			},
			{
				key: "4",
				tabTitle: "search",
				content: "jquery"
			}
		];

		this.state = {
			activeKey: panes[2].key,
			panes
		};
	}

	newTabIndex: number = 5;

	// 使用antd自带图标
	// getTabTitle = (icon: string, tabTitle: string) => (
	// 	<span>
	// 		<Icon type={icon}></Icon>
	// 		{tabTitle}
	// 	</span>
	// );

	// 使用iconfont图标
	getTabTitle = (tabTitle: string, icon?: string) => (
		<span>
			<span className={`icon ${icon}`} style={{ marginRight: "8px" }}></span>
			<span>{tabTitle}</span>
		</span>
	);

	handleCallback = () => {
		console.log();
	};

	handleChangeTab = (activeKey: string) => {
		this.setState({ activeKey });
	};

	handleEditTab = (targetKey: string | React.MouseEvent<HTMLElement, MouseEvent>, action: "add" | "remove") => {
		// console.log();
		this[action](targetKey);
	};

	add = () => {
		const { panes } = this.state;
		const activeKey = `${this.newTabIndex++}`;
		panes.push({
			tabTitle: `New Tab`,
			content: "Content of new Tab",
			key: activeKey
		});
		// 如果新增,则新增的页签高亮
		this.setState({ panes, activeKey });
	};

	remove = (targetKey: string | React.MouseEvent<HTMLElement, MouseEvent>) => {
		let { activeKey } = this.state;
		let lastIndex: number = 0;
		this.state.panes.forEach((pane, i) => {
			// 判断当前要被删除的页签是否是已激活的页签
			// 如果是,则前页签将被激活
			if (pane.key === targetKey) {
				lastIndex = i - 1;
			}
		});
		const panes = this.state.panes.filter(pane => pane.key !== targetKey);
		if (panes.length && activeKey === targetKey) {
			if (lastIndex >= 0) {
				activeKey = panes[lastIndex].key;
			} else {
				activeKey = panes[0].key;
			}
		}
		this.setState({ panes, activeKey });
	};

	render() {
		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>UI Button</h1>
				</div>
				<Card title="Tab页签" className="button-wrap">
					<Row>
						<Col span={12}>
							{/*  type="line" 普通模式 */}
							<Tabs defaultActiveKey="1" onChange={this.handleCallback} type="line">
								<TabsPane tab="Tab 1" key="1">
									react
								</TabsPane>
								<TabsPane tab="Tab 2" key="2" disabled>
									vue
								</TabsPane>
								<TabsPane tab="Tab 3" key="3">
									anglar
								</TabsPane>
							</Tabs>
						</Col>
					</Row>
					<Row>
						<Col span={12}>
							{/*  type="line" 卡片模式 */}
							<Tabs defaultActiveKey="1" onChange={this.handleCallback} type="card">
								<TabsPane tab="Tab 1" key="1">
									react
								</TabsPane>
								<TabsPane tab="Tab 2" key="2" disabled>
									vue
								</TabsPane>
								<TabsPane tab="Tab 3" key="3">
									anglar
								</TabsPane>
							</Tabs>
						</Col>
					</Row>
					<Row>
						<Col span={12}>
							{/*  type="line" 编辑模式 */}
							<Tabs defaultActiveKey="1" onChange={this.handleCallback} type="editable-card">
								<TabsPane tab="Tab 1" key="1">
									react
								</TabsPane>
								<TabsPane tab="Tab 2" key="2" disabled>
									vue
								</TabsPane>
								<TabsPane tab="Tab 3" key="3">
									anglar
								</TabsPane>
							</Tabs>
						</Col>
					</Row>
				</Card>
				<Card title="Tab带图页签A" className="button-wrap">
					<Row>
						<Col span={12}>
							<Tabs defaultActiveKey="1" onChange={this.handleCallback}>
								{tabArray.map((pane: TabPane) => (
									<TabsPane tab={this.getTabTitle(pane.tabTitle, pane.icon)} key={pane.key}>
										{pane.content}
									</TabsPane>
								))}
							</Tabs>
						</Col>
					</Row>
				</Card>
				<Card title="Tab带图页签B" className="button-wrap">
					<Row>
						<Col span={12}>
							<Tabs defaultActiveKey="1" onChange={this.handleCallback}>
								{tabArrayB.map((pane: TabPane) => (
									<TabsPane tab={pane.tabTitle} key={pane.key}>
										{pane.content}
									</TabsPane>
								))}
							</Tabs>
						</Col>
					</Row>
				</Card>
				<Card title="动态可添加页签" className="button-wrap">
					<Row>
						<Col span={12}>
							<Tabs type="editable-card" onChange={this.handleChangeTab} activeKey={this.state.activeKey} onEdit={this.handleEditTab}>
								{this.state.panes.map((pane: TabPane) => (
									<TabsPane tab={pane.tabTitle} key={pane.key}>
										{pane.content}
									</TabsPane>
								))}
							</Tabs>
						</Col>
					</Row>
				</Card>
			</div>
		);
	}
}

export default UITab;
